<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['供应链管理', '生产计划管理', '生产计划']"
      icon="fa fa-cogs"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>生产计划</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn" style="width: calc(100% - 220px)">
                <div class="top_module cancle">
                  <span class="module_text">生产计划编号</span>
                  <input
                    type="text"
                    class="module_inp"
                    [(ngModel)]="searchParams.planCode"
                    placeholder="请输入生产计划编号"
                  />
                  <div class="s_del_icon" (click)="delKey('planCode')">x</div>
                </div>

                <div class="top_module cancle">
                  <span class="module_text">计划年度</span>
                  <input
                    type="text"
                    class="module_inp top_module_select form-control"
                    id="scheduleTimePicker"
                    autocomplete="off"
                    [(ngModel)]="searchParams.planMonth"
                    placeholder="请选择时间"
                  />
                  <div class="s_del_icon" (click)="delKey('planMonth')">x</div>
                </div>

                <div class="top_module cancle">
                  <span class="module_text">设备名称</span>
                  <input
                    type="text"
                    class="module_inp"
                    [(ngModel)]="searchParams.deviceName"
                    placeholder="请输入设备名称"
                  />
                  <div class="s_del_icon" (click)="delKey('deviceName')">x</div>
                </div>

                <div class="top_module cancle">
                  <span class="module_text">物联卡类型</span>
                  <select name="" id="" class="module_inp" [(ngModel)]="searchParams.iotCardType">
                    <option value="">全部</option>
                    <option value="0000">通用卡</option>
                    <option value="0001">新疆卡</option>
                    <option value="0002">云南卡</option>
                  </select>
                  <div class="s_del_icon" (click)="delKey('iotCardType')">x</div>
                </div>

                <div class="top_module cancle">
                  <span class="module_text">版本型号</span>
                  <input
                    type="text"
                    class="module_inp"
                    [(ngModel)]="searchParams.modelVersion"
                    placeholder="请输入版本型号"
                  />
                  <div class="s_del_icon" (click)="delKey('modelVersion')">x</div>
                </div>

                <div class="top_module cancle">
                  <span class="module_text">通道数</span>
                  <input
                    type="text"
                    class="module_inp"
                    [(ngModel)]="searchParams.channelNumber"
                    placeholder="请输入通道数"
                  />
                  <div class="s_del_icon" (click)="delKey('channelNumber')">x</div>
                </div>

                <button type="button" class="btn btn-primary" (click)="tableSearch()">查询</button>
                <button
                  type="button"
                  class="btn btn-primary"
                  (click)="showImportModal(weightModal)"
                  *ngIf="addPermission"
                >
                  上传
                </button>
                <button type="button" class="btn btn-primary" (click)="exportData()">导出</button>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="
                  display
                  dataTables
                  responsive
                  table table-striped table-bordered table-hover
                  dataTable
                  s_h5_table
                "
              >
                <thead>
                  <tr>
                    <th>生产计划编号</th>
                    <th>计划月度</th>
                    <th>设备名称</th>
                    <th>物联卡类型</th>
                    <th>版本型号</th>
                    <th>通道数</th>
                    <th>销售计划数量</th>
                    <th>库存数量</th>
                    <th>生产计划数量</th>
                    <th>创建时间</th>
                    <th>创建人</th>
                    <th>更新时间</th>
                    <th>更新人</th>
                    <!-- 这里也根据权限 -->
                    <th *ngIf="delPermission || editPermission">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData" [ngClass]="{ selected: activeSelected === row.id }">
                    <td>{{ row.planCode }}</td>
                    <td>{{ row.planMonth }}</td>
                    <td>{{ row.deviceName }}</td>
                    <td>
                      <span *ngIf="row.iotCardType === '0000'">通用卡</span>
                      <span *ngIf="row.iotCardType === '0001'">新疆卡</span>
                      <span *ngIf="row.iotCardType === '0002'">云南卡</span>
                    </td>
                    <td>{{ row.modelVersion }}</td>
                    <td>{{ row.channelNumber }}</td>
                    <td>{{ row.salePlanNumber }}</td>
                    <td>
                      {{ row.stockNumber }}
                    </td>
                    <td>{{ row.productPlanNumber }}</td>
                    <td>{{ row.createTime }}</td>
                    <td>{{ row.createName }}</td>
                    <td>{{ row.updateTime }}</td>
                    <td>{{ row.updateName }}</td>
                    <!-- 这里也根据权限 -->
                    <td *ngIf="delPermission || editPermission">
                      <button type="button" (click)="edit_domCode(row, editSubmitCheckModal)" *ngIf="editPermission">
                        编辑
                      </button>
                      <button type="button" (click)="del_domCode(row)" *ngIf="delPermission">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCounts"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>
</div>

<!-- 导入弹框 -->
<div
  bsModal
  #weightModal="bs-modal"
  class="modal fade"
  id="weightModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header" style="position: relative">
        <button type="button" class="close" (click)="cancelUp(weightModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">上传Excel文件</h4>
        <div class="importBtn">
          <button type="button" class="btn btn-primary" (click)="load_module()">下载模板</button>
        </div>
      </div>
      <div class="modal-body">
        <div class="row">
          <form class="form form-inline" role="form">
            <div class="row">
              <div class="col-sm-10" style="padding: 0">
                <div class="clearfix module_line">
                  <button type="button" class="btn btn-primary" style="width: 120px; margin-bottom: 12px">
                    上传模板文件
                    <input
                      type="file"
                      class="up"
                      (change)="fileChange($event.target.files)"
                      name="fileToUpload"
                      (click)="clearFile()"
                      [(ngModel)]="fileUp"
                      type="file"
                      placeholder=""
                    />
                  </button>
                  <br />
                  <span class="row" class="note">注：请先下载模板，采用模板编辑文件后上传 (格式excel)</span>
                </div>
              </div>
            </div>
            <div *ngIf="fileToUpload">
              <label class="control-label col-sm-1"></label>
              <div>
                <ul>
                  <li class="file_list">
                    <i class="fa fa-file-text-o" style="margin-right: 12px"></i>
                    {{ fileToUpload.name }}
                    <i class="fa fa-check-circle green" style="margin-left: 60px"></i>
                  </li>
                </ul>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="cancelUp(weightModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitData(weightModal, submitCheckModal, '2')">
          确认
        </button>
      </div>
    </div>
  </div>
</div>
<!-- 导入弹框 结束 -->

<!-- 提交核对 -->
<div
  bsModal
  #submitCheckModal="bs-modal"
  id="submitCheckModal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
  style="overflow: auto"
>
  <div class="modal-dialog modal-lg" style="width: 1200px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="cancelSubmitCheck(submitCheckModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">提交核对</h4>
      </div>
      <div class="modal-body" style="padding: 15px">
        <div
          class="page-header clearfix s_table_opreation"
          style="margin-top: 0px; margin-bottom: 15px; padding-bottom: 15px"
        >
          <div class="left page-header-btn">
            <div class="top_module">
              <span class="module_text">提交前状态</span>
              <select name="successState" id="" class="module_inp" [(ngModel)]="successState">
                <option value="">全部</option>
                <option value="1">成功</option>
                <option value="0">失败</option>
              </select>
            </div>
            <button type="button" class="btn btn-primary" (click)="queryCheckTable()">查询</button>
          </div>
          <div class="right top-search" style="text-align: right">
            <button type="button" class="btn btn-primary" (click)="batchDelete()">批量删除</button>
          </div>
        </div>
        <div class="table_scroll">
          <table
            class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
          >
            <thead>
              <tr>
                <th>
                  <div class="checkbox" style="margin: 0; left: 5px; text-align: center">
                    <label>
                      <input
                        type="checkbox"
                        class="checkbox style-0"
                        [(ngModel)]="allChecked"
                        (click)="allSelected()"
                      />
                      <span></span>
                    </label>
                  </div>
                </th>
                <th>提交前状态</th>
                <th>计划月度</th>
                <th>设备名称</th>
                <th>物联卡类型</th>
                <th>版本类号</th>
                <th>通道数</th>
                <th>销售计划数量</th>
                <th>库存数量</th>
                <th>生产计划数量</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody *ngIf="submitCheckTableData.length != 0">
              <tr
                *ngFor="let row of submitCheckTableData; let i = index"
                [attr.data-index]="i"
                (click)="rowSelected(row, $event, i)"
              >
                <td>
                  <div class="checkbox" style="margin: 0; left: 5px; text-align: center">
                    <label class="checkbox-label">
                      <input
                        type="checkbox"
                        class="checkbox style-0"
                        [(ngModel)]="row.isChecked"
                        (click)="rowSelected(row, $event, i)"
                      />
                      <span class="checkbox-flag"></span>
                    </label>
                  </div>
                </td>
                <td>
                  <span *ngIf="row.successState == 1" style="color: green">成功</span>
                  <span *ngIf="row.successState == 0" style="color: red">失败</span>
                </td>
                <td>{{ row.planMonth }}</td>
                <td>{{ row.deviceName }}</td>
                <td>
                  <span *ngIf="row.iotCardType === '0000'">通用卡</span>
                  <span *ngIf="row.iotCardType === '0001'">新疆卡</span>
                  <span *ngIf="row.iotCardType === '0002'">云南卡</span>
                </td>
                <td>{{ row.modelVersion }}</td>
                <td>{{ row.channelNumber }}</td>
                <td>{{ row.salePlanNumber }}</td>
                <td>{{ row.stockNumber }}</td>
                <td>{{ row.productPlanNumber }}</td>
                <td>
                  <button type="button" (click)="editSubmitCheck(row, editSubmitCheckModal)">
                    {{ isUpload ? '查看' : '编辑' }}
                  </button>
                  <button type="button" (click)="delSubmitCheck(row)">删除</button>
                </td>
              </tr>
            </tbody>
            <tbody
              *ngIf="submitCheckTableData.length == 0"
              style="height: 50px; margin: 0 auto; text-align: center; line-height: 50px"
            >
              暂无查询数据
            </tbody>
          </table>
        </div>
        <div class="table-fix clearfix">
          <paginator
            [totalRecords]="checkTotalCounts"
            [rows]="checkPageSize"
            [currentPage]="checkCurPage - 1"
            (onPageChange)="checkPaginate($event)"
          ></paginator>
          <button type="button" class="btn default refresh_btn" (click)="checkRefresh()">
            <i class="fa fa-refresh"></i>
          </button>
        </div>
      </div>
      <div class="footerNum" style="padding-left: 20px; font-size: 15px">{{ numMessage }}</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="cancelSubmitCheck(submitCheckModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitCheck(submitCheckModal)">提交</button>
      </div>
    </div>
  </div>
</div>
<!-- 提交核对 end-->

<!-- 编辑提交核对 -->
<section
  bsModal
  #editSubmitCheckModal="bs-modal"
  class="modal fade addRenewal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeEditSubmitCheck(editSubmitCheckModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">{{ isUpload ? '查看' : '编辑' }}</h4>
      </div>
      <div class="modal-body">
        <form
          id="dataCleaning"
          class="form-horizontal"
          role="form"
          novalidate="novalidate"
          [saBootstrapValidator]="cleaningOptions"
        >
          <div class="row form-horizontal">
            <div class="form-group">
              <label class="control-label col-sm-3 no-padding-right">计划月度</label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="planMonth"
                    id="editPlanMonth"
                    autocomplete="off"
                    [(ngModel)]="editcheckForm.planMonth"
                    type="text"
                    disabled
                    placeholder="请输入计划月度"
                  />
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-sm-3 no-padding-right">设备名称</label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="deviceName"
                    id="deviceName"
                    autocomplete="off"
                    [(ngModel)]="editcheckForm.deviceName"
                    type="text"
                    [disabled]="isUpload"
                    placeholder="请输入设备名称"
                  />
                </div>
              </div>
            </div>

            <div class="form-group s_fix_select2">
              <label class="control-label col-sm-3 no-padding-right">
                物联卡类型
                <sup *ngIf="!isUpload">*</sup>
              </label>
              <div class="col-xs-8">
                <select
                  name="iotCardType"
                  id="iotCardType"
                  class="dockingListSelect"
                  [(ngModel)]="editcheckForm.iotCardType"
                  [disabled]="isUpload"
                >
                  <option value="0000">通用卡</option>
                  <option value="0001">新疆卡</option>
                  <option value="0002">云南卡</option>
                </select>
              </div>
            </div>

            <div class="form-group">
              <label class="control-label col-sm-3 no-padding-right">
                版本型号
                <sup *ngIf="!isUpload">*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="modelVersion"
                    id="modelVersion"
                    autocomplete="off"
                    type="text"
                    [(ngModel)]="editcheckForm.modelVersion"
                    placeholder="请输入版本型号"
                    [disabled]="isUpload"
                  />
                </div>
              </div>
            </div>
            <div class="form-group clearfix">
              <label class="control-label col-sm-3 no-padding-right">
                通道数
                <sup *ngIf="!isUpload">*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="channelNumber"
                    autocomplete="off"
                    type="text"
                    [(ngModel)]="editcheckForm.channelNumber"
                    placeholder="请输入通道数"
                    [disabled]="isUpload"
                  />
                </div>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="control-label col-sm-3 no-padding-right">
                销售计划数量
                <sup *ngIf="!isUpload">*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="salePlanNumber"
                    autocomplete="off"
                    type="text"
                    [(ngModel)]="editcheckForm.salePlanNumber"
                    placeholder="请输入销售计划数量"
                    [disabled]="isUpload"
                    onkeyup="value = value.replace(/^(0+)|[^\d]+/g,'')"
                    (ngModelChange)="validateChange('salePlanNumber')"
                    maxlength="9"
                  />
                </div>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="control-label col-sm-3 no-padding-right">
                库存数量
                <sup *ngIf="!isUpload">*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="stockNumber"
                    autocomplete="off"
                    type="text"
                    [(ngModel)]="editcheckForm.stockNumber"
                    placeholder="请输入库存数量"
                    [disabled]="isUpload"
                    onkeyup="value =/^0/.test(value)?'0': value.replace(/[^\d]+/g,'')"
                    (ngModelChange)="validateChange('stockNumber')"
                    maxlength="9"
                  />
                </div>
              </div>
            </div>

            <div class="form-group clearfix">
              <label class="control-label col-sm-3 no-padding-right">
                生产计划数量
                <sup *ngIf="!isUpload">*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <input
                    class="form-control"
                    name="productPlanNumber"
                    autocomplete="off"
                    type="text"
                    [(ngModel)]="editcheckForm.productPlanNumber"
                    placeholder="请输入生产计划数量"
                    [disabled]="isUpload"
                    onkeyup="value = value.replace(/^(0+)|[^\d]+/g,'')"
                    (ngModelChange)="validateChange('productPlanNumber')"
                    maxlength="9"
                  />
                </div>
              </div>
            </div>

            <div class="form-group" *ngIf="isUpload">
              <label class="control-label col-sm-3 no-padding-right">失败原因</label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <textarea
                    class="form-control"
                    name="errorMsg"
                    id="errorMsg"
                    autocomplete="off"
                    [(ngModel)]="editcheckForm.errorMsg"
                    type="text"
                    disabled
                  ></textarea>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer" *ngIf="!isUpload">
        <button type="button" class="btn btn-default" (click)="closeEditSubmitCheck(editSubmitCheckModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitEditSubmitCheck(editSubmitCheckModal)">
          确定
        </button>
      </div>
    </div>
  </div>
</section>
<!-- 编辑提交核对 end-->

<style>
  .dockingListSelect {
    display: block;
    width: 100%;
    height: 32px;
    line-height: 32px;
    border-color: #ccc;
  }
</style>
